<template>
  <div class="container">
    <div>
      <div class="my">
        <div class="header">
          <img class="avatar" src="http://i.waimai.meituan.com/static/img/default-avatar.png"/>
          <p class="nickname">美团小骑手 &gt;</p>
        </div>
        <div class="content">
          <ul class="items">
            <li class="address">
              收货地址管理
            </li>
            <li class="money">
              商家代金券
            </li>
          </ul>
          <ul class="items">
            <li class="email">
              意见反馈
            </li>
            <li class="question">
              常见问题
            </li>
          </ul>
          <p class="tel">客服电话:&nbsp;101-097-77</p>
          <p class="time">服务时间:&nbsp;9:00-23:00</p>
        </div>
      </div>
        <Footer :active="'my'"></Footer>
    </div>
  </div>
</template>

<script>

import  Footer from "@/components/home/Footer"
export default {
  components: {
    Footer
  },
}
</script>

<style lang="stylus">
  .my {
    .header {
      width: 100%;
      height: 3.2rem;

      background-image: url('/app2/img/header.png');
      background-size: cover;
      overflow: hidden;
    }

    .avatar {
      width: (1.44rem);
      height: (1.44rem);
      margin: 0 auto;
      display: block;
      margin-top: (0.5rem);
      border: (0.03rem) solid rgba(255,255,255,0.4);
      border-radius: 50%;
    }
    .nickname {
      color: #333;
      font-size: (16px);
      text-align: center;
      margin-top: (0.3rem);
    }
    .content {
      min-height: 11.4rem;
      background-color: #eee;
    }
    .items {
      border-bottom: 0.2rem solid #eee;
      background-color: #fff;
      li {
        height: 0.9rem;
        font-size: (14px);
        line-height:  0.9rem;
        position: relative;
        padding-left:0.54rem;
        margin-left: 0.3rem;
        border-bottom: 1px solid #e4e4e4;
        &:last-child {
          border: none;
        }
        &:before {
          content: '';
          display: block;
          width: 0.32rem;
          height:  0.32rem;
          position: absolute;
          top: 50%;
          left:  0.02rem;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          background-size: cover;
        }
        &:after {
          content: '>';
          display: block;
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          top: 0;
          right: 0.18rem;
          color: #aaa;
        }
      }
      .address {
        &:before {
          background-image: url('/app2/img/address.png');
        }
      }
      .money {
        &:before {
          background-image: url('/app2/img/money.png');
        }
      }
      .email {
        &:before {
          background-image: url('/app2/img/email.png');
        }
      }
      .question {
        &:before {
          background-image: url('/app2/img/question.png');
        }
      }
    }
    .tel {
      font-size: (15px);
      color: #ffb000;
      text-align: center;
      height: 0.92rem;
      line-height:  0.92rem;
      background-color: #fff;
    }
    .time {
      font-size: (14px);
      text-align: center;
      margin-top: 0.26rem;
      color: #999;
    }

  }
</style>
